<template>
  <div style="padding: 0.25rem">
    <el-form :model="form" label-width="auto" style="max-width: 90%">
      <!-- 商品基本信息 -->
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div style="width: 45%">
          <P style="font-weight: 700; margin-bottom: 10px">基本信息</P>
          <div style="width: 100%; box-shadow: 0 0 0.05rem #ccc; padding: 5%">
            <el-form-item label="商品规格" label-width="0.5rem" >
              <el-input v-model="form.commodity_guige" placeholder="请输入商品规格" />
            </el-form-item>
            <el-form-item label="商品名称" label-width="0.5rem">
              <el-input v-model="form.commodity_name" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="商品品牌" label-width="0.5rem">
              <el-input v-model="form.commodity_pinpai" placeholder="请输入商品品牌" />
            </el-form-item>
            <el-form-item label="商品信息" label-width="0.5rem">
              <el-input v-model="form.commodity_xinxi" placeholder="请输入商品信息" />
            </el-form-item>
            <el-form-item label="商品类型" label-width="0.5rem">
              <el-input v-model="form.commodity_type" placeholder="请输入商品类型" />
            </el-form-item>
          </div>
        </div>
        <!-- 商品价格信息 -->
        <div style="width: 45%">
          <P style="font-weight: 700; margin-bottom: 10px">价格信息</P>
          <div style="width: 100%; box-shadow: 0 0 0.05rem #ccc;; padding: 5%">
            <el-form-item label="商品换购积分" label-width="0.6rem">
              <el-input v-model="form.commodity_jifen" placeholder="请输入商品换购积分" />
            </el-form-item>
            <el-form-item label="商品购买价格" label-width="0.6rem">
              <el-input v-model="form.commodity_price" placeholder="请输入商品价格" />
            </el-form-item>
            <el-form-item label="价格说明" label-width="0.6rem">
              <el-input
                v-model="form.price_shuoming"
                placeholder="请输入价格说明"
                type="textarea"
                :rows="7"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!-- 商品详细信息 -->
      <P style="font-weight: 700; margin-bottom: 10px; margin-top: 0.2rem;margin-bottom:0.1rem" >商品详细信息</P>
      <div style="width: 95%; box-shadow: 0 0 0.05rem #ccc;; padding: 5%">
        <el-form-item label="商品销售性质">
          <el-input v-model="form.commodity_xingzhi" placeholder="请输入商品的销售性质" />
        </el-form-item>
        <el-form-item label="商品地区">
          <el-input v-model="form.commodity_diqu" placeholder="请输入商品地区" />
        </el-form-item>

        <el-form-item label="商品数量（库存）">
          <el-input v-model="form.commodity_number" placeholder="请输入商品数量" />
        </el-form-item>
        <el-form-item label="商品是否可以使用积分换购">
          <el-radio-group v-model="form.commodity_istrue">
            <el-radio :value="true">可以</el-radio>
            <el-radio :value="false">不行</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="商品上市时间">
          <el-date-picker
            v-model="form.commodity_time"
            type="datetime"
            placeholder="请选择商品上市时间"
          />
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/dqj_user/uploadimg"
            :show-file-list="false"
            :on-success="image1"
          >
            <img
              style="width: 200px"
              v-if="form.commodity_img1"
              :src="form.commodity_img1"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/dqj_user/uploadimg"
            :show-file-list="false"
            :on-success="image2"
          >
            <img
              style="width: 200px"
              v-if="form.commodity_img2"
              :src="form.commodity_img2"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/dqj_user/uploadimg"
            :show-file-list="false"
            :on-success="image3"
          >
            <img
              style="width: 200px"
              v-if="form.commodity_img3"
              :src="form.commodity_img3"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/dqj_user/uploadimg"
            :show-file-list="false"
            :on-success="image4"
          >
            <img
              style="width: 200px"
              v-if="form.commodity_img4"
              :src="form.commodity_img4"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </div>

      <div class="bottom">
        <el-form-item>
          <el-button type="primary" style="width: 1rem" @click="onSubmit">添加</el-button>
          <el-button @click="resetForm" style="width: 1rem">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
  
  <script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Addcommodity } from '@/request/api/api.ts'

// do not use same name with ref
const form = reactive({
  commodity_guige: '', //商品规格
  commodity_price: '', //商品价格
  commodity_jifen: '', //商品积分
  commodity_pinpai: '', //商品品牌
  commodity_name: '', //商品名称
  commodity_xingzhi: '', //商品性质
  commodity_diqu: '', //商品地区
  commodity_time: '', //商品时间
  commodity_canshu: '', //商品参数
  commodity_xinxi: '', //商品信息
  commodity_img1: '', //商品图片
  commodity_img2: '', //商品图片
  commodity_img3: '', //商品图片
  commodity_img4: '', //商品图片
  commodity_type: '', //商品类型
  price_shuoming:
    '商品价格可能随国际交易价格实时变动，拍下即视为您同意产品价格波动，订单发货后，不接受退货，不补差价，同时也不接受指定时间发货，敬请谅解！', //价格说明
  commodity_number: '', //商品数量
  commodity_istrue: '' //商品是否可以使用积分换购
})
// 图片1
const image1: UploadProps['onSuccess'] = (response, uploadFile) => {
  form.commodity_img1 = response.msg
}
// 图片2
const image2: UploadProps['onSuccess'] = (response, uploadFile) => {
  form.commodity_img2 = response.msg
}
// 图片3
const image3: UploadProps['onSuccess'] = (response, uploadFile) => {
  form.commodity_img3 = response.msg
}
// 图片4
const image4: UploadProps['onSuccess'] = (response, uploadFile) => {
  form.commodity_img4 = response.msg
}

// 添加商品
const onSubmit = async () => {
  let data = await Addcommodity(form)
  if (data.code == 200) {
    ElMessage({
      message: '添加成功',
      type: 'success'
    })
    ;(form.commodity_guige = ''), //商品规格
      (form.commodity_price = ''), //商品价格
      (form.commodity_jifen = ''), //商品积分
      (form.commodity_pinpai = ''), //商品品牌
      (form.commodity_name = ''), //商品名称
      (form.commodity_xingzhi = ''), //商品性质
      (form.commodity_diqu = ''), //商品地区
      (form.commodity_time = ''), //商品时间
      (form.commodity_canshu = ''), //商品参数
      (form.commodity_xinxi =
        '商品金价可能随国际黄金价和上海黄金交易所综合报价实时变动，拍下即视为您同意产品价格波动，订单发货后，不接受退货，不补差价，同时也不接受指定时间发货，敬请谅解！'), //商品信息
      (form.commodity_img1 = ''), //商品图片
      (form.commodity_img2 = ''), //商品图片
      (form.commodity_img3 = ''), //商品图片
      (form.commodity_img4 = ''), //商品图片
      (form.commodity_type = ''), //商品类型
      (form.price_shuoming = ''), //价格说明
      (form.commodity_number = ''), //商品数量
      (form.commodity_istrue = '') //商品是否可以使用积分换购
  } else {
    ElMessage({
      message: '添加失败',
      type: 'error'
    })
  }
}
// 重置
const resetForm = () => {
  ;(form.commodity_guige = ''), //商品规格
    (form.commodity_price = ''), //商品价格
    (form.commodity_jifen = ''), //商品积分
    (form.commodity_pinpai = ''), //商品品牌
    (form.commodity_name = ''), //商品名称
    (form.commodity_xingzhi = ''), //商品性质
    (form.commodity_diqu = ''), //商品地区
    (form.commodity_time = ''), //商品时间
    (form.commodity_canshu = ''), //商品参数
    (form.commodity_xinxi = ''), //商品信息
    (form.commodity_img1 = ''), //商品图片
    (form.commodity_img2 = ''), //商品图片
    (form.commodity_img3 = ''), //商品图片
    (form.commodity_img4 = ''), //商品图片
    (form.commodity_type = ''), //商品类型
    (form.price_shuoming = ''), //价格说明
    (form.commodity_number = ''), //商品数量
    (form.commodity_istrue = '') //商品是否可以使用积分换购
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  border: 1px solid rgb(200, 200, 200);
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  background-color: black;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.bottom {
  width: 100%;
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}

form .el-input{
    height: 40px;
}
form .el-form-item{
  font-weight: 700;
}
</style>